<template>
  <div class="wrapper">
    <template v-if="Object.keys(functionalData).length">
      <el-card shadow="hover" class="mb-6">
        <template #header>
          <div class="font-semibold">📌 基本信息</div>
        </template>
        <div class="grid grid-cols-2 gap-4 text-sm">
          <div><strong>测试用例：</strong> {{ functionalData.case_name || '未命名' }}</div>
          <div>
            <strong>状态：</strong>
            <el-tag :type="functionalData.status ? 'success' : 'danger'">
              {{ functionalData.status ? '通过' : '失败' }}
            </el-tag>
          </div>
          <div><strong>URL：</strong> {{ functionalData?.url }}</div>
          <div><strong>方法：</strong> {{ functionalData?.method }}</div>
          <div><strong>耗时：</strong> {{ functionalData?.duration_seconds.toFixed(1) }} ms</div>
          <div><strong>时间：</strong> {{ formatTime(functionalData.timestamp) }}</div>
        </div>
      </el-card>

      <!-- 请求数据 -->
      <el-card shadow="hover" class="mb-6">
        <template #header>
          <div class="font-semibold">📤 请求数据</div>
        </template>
        <pre class="json-pre">{{ prettyPrint(functionalData.request) }}</pre>
      </el-card>

      <!-- 响应数据 -->
      <el-card shadow="hover" class="mb-6">
        <template #header>
          <div class="font-semibold">📥 响应数据</div>
        </template>
        <div class="flex justify-between items-center mb-2">
          <span
            >状态码: <el-tag size="small">{{ functionalData.response?.status_code }}</el-tag></span
          >
          <el-button size="small" @click="copyResponse">📋 复制</el-button>
        </div>
        <pre class="json-pre">{{ prettyPrint(functionalData.response?.body) }}</pre>
        <!-- 底部操作 -->
        <div class="mt-8 text-right">
          <el-button @click="$router.back()">← 返回</el-button>
        </div>
      </el-card>
    </template>

    <!-- 断言结果 -->
    <!-- <el-card shadow="hover">
    <template #header>
      <div class="font-semibold">✅ 断言结果</div>
    </template>
    <el-table :data="functionalData.assertions || []" size="small" stripe>
      <el-table-column label="描述" prop="description" />
      <el-table-column label="预期" prop="expected" width="200" />
      <el-table-column label="实际" prop="actual" width="200" />
      <el-table-column label="结果" width="100">
        <template #default="{ row }">
          <el-tag :type="row.passed ? 'success' : 'danger'">
            {{ row.passed ? '通过' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card> -->
  </div>
</template>

<script setup>
import { defineProps, computed, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useReportStore } from '@/stores/reportStore'

// const props = defineProps({
//   result: {
//     type: Object,
//     required: true,
//   },
// })

const reportStore = useReportStore()

// const functionalData = computed(() => {
//   return reportStore.functionalData
// })
const functionalData = computed(() => {
  return JSON.parse(sessionStorage.getItem('currentTestCaseReport'))
})

const formatTime = (ts) => {
  return ts ? new Date(ts).toLocaleString() : 'N/A'
}

const prettyPrint = (data) => {
  try {
    return JSON.stringify(data, null, 2)
  } catch {
    return String(data)
  }
}

// functionalData.value = sessionStorage.getItem('currentTestCaseReport')

const copyResponse = () => {
  const text = JSON.stringify(functionalData.response?.body, null, 2)
  navigator.clipboard.writeText(text)
  ElMessage.success('响应内容已复制到剪贴板')
}
</script>

<style scoped>
.json-pre {
  font-family: 'Courier New', monospace;
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
}
</style>
